<template>
  <el-dialog :close-on-click-modal="false" :title="$t('api_test.automation.add_scenario')" :visible.sync="visible"
             width="45%"
             :destroy-on-close="true">
    <el-form :model="scenarioForm" label-position="right" label-width="100px" size="small" :rules="rule"
             ref="scenarioForm">
      <el-form-item :label="$t('commons.name')" prop="name">
        <el-input v-model="scenarioForm.name" autocomplete="off" :placeholder="$t('commons.name')"/>
      </el-form-item>

      <el-form-item :label="$t('test_track.module.module')" prop="apiScenarioModuleId">
        <ms-select-tree size="small" :data="moduleOptions" :defaultKey="scenarioForm.apiScenarioModuleId"
                        @getValue="setModule" :obj="moduleObj" clearable checkStrictly/>
      </el-form-item>

      <el-form-item :label="$t('api_test.automation.scenario.principal')" prop="principal">
        <el-select v-model="scenarioForm.principal"
                   :placeholder="$t('api_test.automation.scenario.principal')" filterable size="small"
                   style="width: 100%">
          <el-option
            v-for="item in userOptions"
            :key="item.id"
            :label="item.id + ' (' + item.name + ')'"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('api_test.automation.scenario.follow_people')" prop="followPeople">
        <el-select v-model="scenarioForm.follows"
                   multiple
                   :placeholder="$t('api_test.automation.scenario.follow_people')" filterable size="small"
                   style="width: 100%">
          <el-option
            v-for="item in userOptions"
            :key="item.id"
            :label="item.id + ' (' + item.name + ')'"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('commons.description')" prop="description" style="margin-bottom: 29px">
        <el-input class="ms-http-textarea" v-model="scenarioForm.description"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 10}"
                  :rows="2" size="small"/>
      </el-form-item>
    </el-form>

    <template v-slot:footer>
      <ms-dialog-footer
        @cancel="visible = false"
        :isShow="true"
        :title="$t('commons.edit_info')"
        @saveAsEdit="saveScenario(true)"
        @confirm="saveScenario">
      </ms-dialog-footer>

    </template>

  </el-dialog>
</template>

<script>
import {getCurrentProjectID, getCurrentUser, getUUID} from "@/common/js/utils";
import MsDialogFooter from "@/business/components/common/components/MsDialogFooter";
import {saveScenario} from "@/business/components/api/automation/api-automation";
import MsSelectTree from "@/business/components/common/select-tree/SelectTree";

export default {
  name: "MsAddBasisScenario",
  components: {MsDialogFooter, MsSelectTree},
  props: {
    moduleOptions: Array,
  },
  data() {
    return {
      scenarioForm: {follows: []},
      visible: false,
      currentModule: {},
      userOptions: [],
      moduleObj: {
        id: 'id',
        label: 'name',
      },
      rule: {
        name: [
          {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
          {max: 100, message: this.$t('test_track.length_less_than') + '100', trigger: 'blur'}
        ],
        apiScenarioModuleId: [{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
        principal: [{
          required: true,
          message: this.$t('api_test.automation.scenario.select_principal'),
          trigger: 'change'
        }],
      },
    }
  },
  computed: {
    projectId() {
      return getCurrentProjectID();
    },
  },
  methods: {
    setModule(id, data) {
      this.scenarioForm.apiScenarioModuleId = id;
      this.scenarioForm.modulePath = data.path;
    },
    saveScenario(saveAs) {
      this.$refs['scenarioForm'].validate((valid) => {
        if (valid) {
          let path = "/api/automation/create";
          this.setParameter();
          this.scenarioForm.status = 'Underway';
          this.scenarioForm.level = 'P0';
          if (saveAs) {
            this.scenarioForm.request = JSON.stringify(this.scenarioForm.request);
            this.$emit('saveAsEdit', this.scenarioForm);
            this.visible = false;
          } else {
            saveScenario(path, this.scenarioForm, [], this, (response) => {
              this.$success(this.$t('commons.save_success'));
              this.visible = false;
              this.$emit('refresh');
            });
          }
        } else {
          return false;
        }
      })
    },
    setParameter() {
      this.scenarioForm.projectId = this.projectId;
      this.scenarioForm.id = getUUID().substring(0, 8);
      this.scenarioForm.protocol = this.currentProtocol;

      if (!this.scenarioForm.modulePath) {
        this.scenarioForm.modulePath = this.$t("commons.module_title");
      }
      if (!this.scenarioForm.apiScenarioModuleId) {
        this.scenarioForm.apiScenarioModuleId = "default-module";
      }
    },
    getMaintainerOptions() {
      this.$get('/user/project/member/list', response => {
        this.userOptions = response.data;
      });
    },
    open(currentModule) {
      this.scenarioForm = {principal: getCurrentUser().id};
      this.currentModule = currentModule;
      if (this.scenarioForm.apiScenarioModuleId === undefined) {
        this.scenarioForm.apiScenarioModuleId = this.moduleOptions[0].id;
      }
      this.getMaintainerOptions();
      this.visible = true;
    }
  }
}
</script>
